<script>
import Taro from '@tarojs/taro'
import { Button } from 'vant'
export default {
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      type: 'memory'
    }
  },
  computed: {
    list() {
      return {
        memory: [
          { name: '纸牌记忆', value: 'memory/card' },
          { name: '数字记忆', value: 'memory/number' }
        ],
        space: [
          { name: '盖塔楼', value: 'space/tower' },
          { name: '俄罗斯方块', value: 'space/tetris' }
        ],
        execution: [
          { name: '字与色违', value: 'execution/color' },
          { name: '走迷宫', value: 'execution/maze' }
        ]
      }[this.type]
    }
  },
  onLoad(options) {
    this.type = options.type || 'memory'
  },
  methods: {
    toPage(main) {
      Taro.navigateTo({
        url: `/pages/game/${main}/index`
      })
    }
  }
}
</script>

<template>
  <div class="memory-list">
    <div class="memory-list__content">
      <van-button
        v-for="item in list"
        :key="item.value"
        type="primary"
        size="large"
        @click="toPage(item.value)"
      >
        {{ item.name }}
      </van-button>
    </div>
  </div>
</template>

<style lang="less">
.memory-list {
  position: relative;
  padding: 40px;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #ffd01e;

  &__content {
    margin-top: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .van-button + .van-button {
    margin-top: 20px;
  }
}
</style>
